<template>
    <div class="supplier">
        <Head msg="供应商" backimg="1">
        </Head>
        <div class="supplier-search">
            <input class="supplier-input" type="text" v-model="name" placeholder="请输入供应商名称">
            <img class="input-pic" src="../image/icon-search.png" @click="search">
        </div>
        <cube-scroll
                ref="scroll"
                class="scroll-body"
                :data="lists"
                :options="options"
                @pulling-up="list"
        >
        <div class="supplier-list" @click="todetail(item.id)" v-for="(item,index) in lists" :key="index">
            <div class="supplier-list-head">
                <img :src="item.img" class="list-pic">
                <div class="list-content">
                    <div class="list-name">{{item.username}}</div>
                    <div class="list-title">地址：{{item.country}}{{item.province}}{{item.city}}{{item.address}}</div>
                    <div class="list-title">电话：{{item.mobile}}</div>
                </div>
            </div>
            <!--            <div class="supplier-list-bottom">-->
            <!--                <div class="supplier-goods-btn">产品询价</div>-->
            <!--                <div class="supplier-test-btn">样品检测</div>-->
            <!--                <div class="supplier-shop-btn">订单采购</div>-->
            <!--            </div>-->
        </div>
        <!-- 没有记录 -->
        <div class="yoshop-notcont" v-if="!lists.length && !isLoading">
            <!--                        <div class="iconfont icon-wushuju"></div>-->
            <div class="cont">亲，暂无订单哦</div>
        </div>
        </cube-scroll>

    </div>
</template>

<script lang="ts">
    // @ is an alias to /src
    import Sence from '../sence/Sence';
    import {Component, Vue} from "vue-property-decorator";
    import Head from '@/components/Head.vue';
    import HelloWorld from "@/components/HelloWorld.vue";

    @Component({
        components: {
            HelloWorld,
            Head
        }
    })
    export default class Supplier extends Sence {
        public page: number = 1; // 当前页数
        public name: string = ''; // 当前供应商关键字
        public lists: any = []; // 供应商数据
        public isLoading:boolean = true; // 加载锁
        public options: object = {
            pullUpLoad: true
        }; // 上拉加载

        /**
         * 初始化
         */
        public mounted(): void {
            this.list();
        }

        /**
         * 前往供应商详情
         */
        public todetail(id: number): void {
            this.$router.push(`/supplydetail?id=${id}`)
        }

        /**
         * 供应商列表
         */
        public list(): void {
            this.post('index.php/api/Supplier/list', {
                pages: this.page,
                limit: this.pageSize,
                name: this.name
            }).then((res: any) => {
                this.lists = [...this.lists, ...res.data];
                this.page += 1;
                if (res.data.length < this.pageSize) {
                    this.options = {
                        pullUpLoad: false
                    };//上拉加载
                }
                this.isLoading = false;
            })
        }

        /**
         * 搜素
         */
        public search(): void {
            this.lists=[];
            this.page=1;
            this.isLoading=true;
            this.list();
        }
    };
</script>
<style lang="stylus" scoped>
    .scroll-body
        height calc(100vh - 95px - 50px)
        padding-bottom 4vw

    >>>.cube-scroll-list-wrapper
        overflow visible

    .supplier-search
        display flex
        flex-direction row
        justify-content space-between
        align-items center
        background #4876ff
        height 50px
        width 100vw
        padding 0 15px

    .supplier-input
        width calc(100vw - 30px - 20px - 15px)
        height 30px
        border 1px solid #ccc
        padding 0 15px
        box-sizing border-box
        border-radius 3px

    .input-pic
        width 20px
        height 20px

    .input-pic:active
        opacity 0.5

    .supplier-list
        display flex
        flex-direction column
        box-shadow 0 0 10px #ccc
        margin 15px 15px 0 15px
        border-radius 3px

    .supplier-list-head
        display flex
        flex-direction row
        padding 15px 15px 15px 15px

    .supplier-list-bottom
        display flex
        flex-direction row
        justify-content space-around
        align-items center
        padding 10px 0

        div
            padding 7px 15px
            font-size 12px
            text-align center
            color white
            border-radius 5px

    .supplier-goods-btn
        background #ff463f

    .supplier-test-btn
        background dodgerblue

    .supplier-shop-btn
        background forestgreen


    .list-pic
        width 88px
        height 66px

    .list-content
        display flex
        flex-direction column
        justify-content space-around
        margin-left 15px

    .list-name
        font-size 16px
        font-weight bold
        margin-bottom 5px

    .list-title
        margin-top 6px
        font-size 13px
        color #808080
        line-height 17px


</style>
